<template>
  <a-form layout="horizontal" :form="form" class="form" >
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="角色名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'roleName',
              {rules: [{ required: true, message: '请输入角色名称', whitespace: true}], initialValue: this.initData.roleName}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item label="角色类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            v-decorator="[
              'roleType',
              {rules: [{ required: true, message: '请输入用户类型', whitespace: true}], initialValue: this.initData.roleType}
            ]">
            <a-select-option v-for="item in dictData.roleType" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            v-decorator="[
              'status',
              {rules: [{ required: true, message: '请输入状态', whitespace: true}], initialValue: this.initData.status}
            ]"
          >
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="24" :sm="24">
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea
            placeholder=""
            :rows="4"
            v-decorator="[
              'remarks',
              {rules: [{ required: false, message: '请输入备注', whitespace: true}], initialValue: this.initData.remarks}
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8" :style="{display:'none'}">
      <a-col :md="8" :sm="24">
        <a-form-item label="组织id" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'roleId',
              {rules: [{ required: false, message: '请输入组织id', whitespace: true}], initialValue: this.initData.roleId}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="上级组织id" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'parentId',
              {rules: [{ required: false, message: '请输入上级组织id', whitespace: true}], initialValue: this.initData.parentId}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { getBatchDict } from "@/services/system/api"
export default {
  data () {
    return {
      hideChecked: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      },
      confirmLoading: false,
      dictData: {},
      form: this.$form.createForm(this),
      initData: {}
    }
  },
  props: {
    roleInfo: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  created () {
    // 数据初始化
    const params = {}
    params.dictFields = 'roleType'
    this.$http.post(getBatchDict,params).then(res => {
      this.dictData = res.result
    })
    if (this.roleInfo) {
      const role = {}
      if (this.roleInfo.status) {
        role.status = '1'
      } else {
        role.status = '0'
      }
      role.roleName = this.roleInfo.roleName
      role.roleId = this.roleInfo.roleId
      role.parentId = this.roleInfo.parentId
      role.roleType = this.roleInfo.roleType
      role.remarks = this.roleInfo.remarks
      this.initData = role
    } else {
      this.initData = {}
    }
  },
  methods: {
  }
}
</script>
